<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui">

<ui:composition template="/dndTemplate.xhtml">

	
	<ui:define name="main">
		
			<table border="1" width="100%">
				<tr>
					<td colspan="2">
					<h:form>
					Name:<p:inputText
							value="#{cardsBean.searchDeckName}" id="searchDeckName" />
						Description:<p:inputText value="#{cardsBean.searchDeckDesc}"
							id="searchDeckDesc" /> <p:commandButton value="Search"
							action="#{cardsBean.searchDeck()}" update=":decks">
						</p:commandButton>
					</h:form>
					</td>
				</tr>

				<tr>
					<td width="300" height="500" valign="top">
					<p:dataList
							value="#{cardsBean.decks}" var="deck" id="decks"
							type="definition" paginator="true" rows="2">
							<h:form>


							<p:commandButton icon="ui-icon-search" update=":cards"
								title="View Detail" action="#{cardsBean.selectDeck(deck)}" />
							<p:graphicImage value="#{deck.pictureURL}" width="40" height="50" />
					#{deck.name}
					
						</h:form>
						</p:dataList></td>
					<td valign="top">
						<table>
							<tr>
								<td colspan="2">
								<h:form>
								Name:<p:inputText
										value="#{cardsBean.searchCardName}"  />
									Description:<p:inputText value="#{cardsBean.searchCardDesc}"/> 
									<p:commandButton value="Search"
										action="#{cardsBean.searchCard()}" update=":cards">
									</p:commandButton>
								</h:form>
								</td>

							</tr>
							<tr>
								<td colspan="2" height="300" valign="top">
								<h:form id="cards">
								<p:ring id="cards"
										value="#{cardsBean.cards}" var="card">
										
										<p:panel style="border:1;width:150;">
										
											<h:outputText value="#{card.name}" />
											<p:graphicImage value="#{card.pictureURL}" width="80"
												height="100" />
											<br />
											<h:outputText value="#{card.description}" />
											<br />
											<p:commandButton icon="ui-icon-search" title="View" action="#{cardsBean.selectCard(card)}"  update=":cardForm :actions"/>

										
										</p:panel>
										
									</p:ring>
									</h:form>
									</td>

							</tr>


							<tr>
								<td valign="top">
								<h:form id="cardForm">
								Name:<h:outputText value="#{cardsBean.selectedCard.name}" />
								<br />
								<p:graphicImage value="#{cardsBean.selectedCard.pictureURL}" width="240"
												height="300" />
								<br />
								Description:<h:outputText value="#{cardsBean.selectedCard.description}" />
								<br />
								Author:<h:outputText value="#{cardsBean.selectedCard.author.name}" />
								<br />
								<h:form id="rating">
								Rating: <p:rating  cancel="false"  value="#{cardsBean.selectedCardRate}" readonly="#{!myCardsBean.loggedIn}" id="rate">
									</p:rating>
								(<h:outputText value="#{cardsBean.selectedCard.rateCount}" id="ratingCount"/>)
								<p:commandButton value="Submit" action="#{cardsBean.refreshCard()}" update="rate ratingCount" >
										<f:actionListener binding="#{myCardsBean.addRating(cardsBean.selectedCardRate, cardsBean.selectedCard.id)}" />
				
								</p:commandButton>
								
								</h:form>
								</h:form>
								</td>
								<td>
								
								<p:dataList id="actions"
										value="#{cardsBean.actions}" var="action" type="definition" paginator="true" rows="10">
								
											<h:form>
											<h:outputText value="#{action.name}" />
											<p:graphicImage value="#{action.pictureURL}" width="40"
												height="50" />
											<br />
											<h:outputText value="#{action.description}" />
											<br />
											<p:commandButton icon="ui-icon-search" title="View" action="#{myCardsBean.selectAction(action)}"  update="@form"/>
											</h:form>

										
									</p:dataList>
								
										
								
									
								</td>

							</tr>
							<tr>
								<td colspan="2"><p:scrollPanel style="width:350px;height:400px" scrollMode="native" id="commentPanel">
									Comments:
								<p:dataList value="#{cardsBean.comments}" var="comment" id="comments" type="definition">
											<table border="1">
												<tr>
													<td>#{comment.author.name}</td>
													<td>#{comment.creationDate}</td>
												</tr>
												<tr>
													<td colspan="2">#{comment.message}</td>

												</tr>


											</table>

										</p:dataList>
										<h:form>
										<p:inputTextarea rows="6" cols="33" value="#{myCardsBean.commentMessage}" />
										<p:commandButton value="Comment" action="#{cardsBean.refreshComments()}" update=":commentPanel">
											<f:actionListener binding="#{myCardsBean.addComment(cardsBean.selectedCard.id)}" />
										</p:commandButton>
										</h:form>
									</p:scrollPanel></td>
							</tr>

						</table>
					</td>
				</tr>
			</table>


	</ui:define>

</ui:composition>

</html>
